<template>
    <!-- :default-active="$route.path" :router="true" :unique-opened="true" :collapse="menuFlexible" :collapse-transition="false" -->
    <el-menu
        :default-active="$route.path" :router="true" :unique-opened="true" :collapse="menuFlexible"
        :collapse-transition="false"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" class="navigation"
    >
        <el-menu-item @click="menuFlexible = true">
            <i class="el-icon-more"></i>
            <span slot="title">展开/收起</span>
        </el-menu-item>
        
        <template v-for="(item,index) in $store.state.options.navigation.menus" >
            <el-submenu v-if="showMenu(item,index)" :key="item.path" :index="item.path">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.name }}</span>
                </template>
                <el-menu-item v-for="itemx in item.children" :key="itemx.path" :index="itemx.path">
                    {{ itemx.name }}
                </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :key="item.path" :index="item.path">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.name }}</span>
            </el-menu-item>
        </template>
    </el-menu>
</template>

<script>
    import {Menu, Submenu, MenuItem, MenuItemGroup, Tooltip} from 'element-ui';

    export default {
        components: {
            [Menu.name]: Menu,
            [Submenu.name]: Submenu,
            [MenuItem.name]: MenuItem,
            [MenuItemGroup.name]: MenuItemGroup,
            [Tooltip.name]: Tooltip
        },
        computed: {
            menuFlexible: {
                get() {
                    return this.$store.state.options.navigation.main;
                },
                set() {
                    var state = !this.$store.state.options.navigation.main;

                    this.$store.commit('options/setElementValue', [
                        {
                            key: 'navigation.main', value: state
                        }
                    ]);
                }
            }
        },
        data() {
            return {
                groupId: 0
            }
        },
        mounted() {
            // this.groupId = JSON.parse(window.sessionStorage.setItem("user"));
        },
        methods: {
            showMenu(item, index) {
                // console.log('logs ', item)
                let isCurGroup = false;
                let groupId = JSON.parse(window.sessionStorage.getItem("groupId"));
                groupId = parseInt(groupId)//1 门店 2业务员 3暂存点主管  4主管 5库管 6会计 7最高管理()admin)
          /*       if (groupId == 1) {
                    return index==1?true:false
                } else if (groupId == 2) {
                    return  index==1?true:false
                } else if (groupId == 3) {
                    return  index==1?true:false
                } else if (groupId == 4) {
                    return  index==1?true:false
                } else if (groupId == 5) {
                    return  index==1?true:false
                } else if (groupId == 6) {
                    return  index==1?true:false
                } else if (groupId == 7) {
                    return  index==1?true:false
                } else {
                }*/
                if (item.children.length > 0) {
                    return true
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    .navigation {
        height: 100%;
    }
</style>
